
<script>
import './index.less';

export default {
  name: 'JeSwitch',
  props: {
    prefixCls: {
      type: String,
      default: 'je-switch',
    },
    // dataItem: {
    //   type: Object,
    //   default: () => {},
    // },
    disabled: {
      type: Boolean,
      default: false,
    },
    checked: {
      type: Boolean,
      default: false,
    },
    change: {
      type: Function,
      default: () => {},
    },
  },
  methods: {
    onClick() {
      
    },
    onChange(e) {
      // this.$emit('change', { checked: this.checked, ...this.$props.dataItem });
      const { checked } = e.target;
      if (this.$props.change) {
        this.$props.change({ checked, ...this.$props.dataItem });
      }
      // this.$emit('update:checked', this.checked);
    },
  },
  render() {
    const {
      prefixCls,
      disabled,
      name,
      className,
      platform,
      color,
      style,
      checked,
      // dataItem: {

      // },
      ...restProps
    } = this.$props;
    return (
      <label class={prefixCls} >

        <input
          type="checkbox"
          name={name}
          class={`${prefixCls}-checkbox`}
          disabled={disabled}
          checked={checked}
          onChange={this.onChange}
          value={checked ? 'on' : 'off'}
          {...(!disabled ? { onClick: this.onClick } : {})}
        />
        <div
          class={['checkbox', {
            checkboxDisabled: disabled,
          }]}
          style={style}
          {...(disabled ? { onClick: this.onClick } : {})}
        />
      </label>
    );
  },
};
</script>

<style>

</style>
